웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹사이트에 프린트 버튼을 만드는 방법에 대하여 알아봅니다. 인쇄하기... 출력에 필요한 프린트 버튼을 만들기 위해서 무엇이 필요할까요? 코드는 어떻게 작성해야할까요?
! 프린트 버튼이 왜 필요할까...
프린트 버튼은 보통 많은 글을 보여주는 콘텐츠 제공 웹사이트에서 주로 제공됩니다. 콘텐츠를 공유하는 기능 버튼과 함께 출력할 수 있는 버튼을 제공하죠. 이렇게 하면 방문자가 콘텐츠를 더 편하게 읽고 관리할 수 있도록 도움을 주며 모니터를 이용해 읽을 수도 필요해의해 출력해서 읽도록 도와줍니다.
Webisfree.com 역시 프린트 버튼이 존재합니다. 동작하는 기능은 간단합니다. 버튼을 누르면 방문자가 출력할 수 있도록 기능을 제공합니다. 하지만!! 프린트 버튼을 위해서는 몇 가지 필요한 필수 작업들이 있습니다. 기능만으로는 제대로된 출력 기능을 제공할 수 없죠.
쉽게 출력할 수 있는 기능의 프린트 버튼
# 프린트 버튼을 만들자
앞에서 언급한 것처럼 프린트 버튼을 만들때 생각할 부분은 무엇일까요? 일단 기능적인 부분에서 스크립트를 사용하여 출력하도록 해야합니다. 이때는 간단하게 아래 코드 한줄이면 가능합니다.
코드를 실행하면 Ctrl + P 버튼을 누른 것처럼 출력창이 나타나게됩니다. 하지만 문제가 있는데 프린트에 출력될 모습이 실제 모니터에 나타나는 부분과 많이 다릅니다.
그 이유는 출력물에 적용되는 CSS와 디스플레이 모니터에 적용되는 CSS가 다른 부분도 있을 수 있으며 기본적으로 웹사이트가 출력될때는 시스템에 따라 적용되는 부분들이 존재하기 때문입니다. 즉 이런 부분들을 수정해야만 이상적인 출력버튼을 구현할 수 있습니다. 이를 위해서 아래의 두 가지 방법을 알아야합니다.
- 미디어 쿼리 print CSS
- Link 영역 등의 레이아웃 겹치는 부분 해결
CSS 미디어 쿼리를 사용하면 출력에 필요한 부분만 CSS style 적용하는 것이 가능합니다. 이를 사용하여 콘텐츠 영역을 수정할 필요가 있습니다. 주로 아래의 과정들이 필요합니다.
그럼 CSS의 @media 쿼리에서 print, 출력시 어떻게 적용해야하는지 알아봅니다.
# CSS media 쿼리로 print에 대하여 설정하기
아래 코드는 실제 webisfree.com에 적용된 css입니다. 출력을 위해서 불필요한 광고와 aside 영역등을 안보이도록 변경하는 코드가 추가되어 있습니다.
미디어 쿼리는 위와 같이 only print나 print의 값을 사용하여 인쇄시에만 적용되는 스타일을 설정합니다. 이 부분이 매우 중요하며 특히 광고 영역이나 주요 콘텐츠가 아닌 부분 등은 과감히 숨기도록 합니다. display: none;을 사용하면 좋겠죠?
! 인쇄시 링크 주소 제거하기
반드시 필요한 작업 중 하나가 바로 인쇄시 나타나는 링크주소입니다. 이는 시스템에 기본으로 적용되므로 media 쿼리 안에 사용하는 것이 좋습니다. 아래와 같이 a 태그에 적용될 수 있도록 추가합니다.
# 마치면서
여기까지 웹사이트에 필요한 출력, 인쇄 버튼을 만드는 방법에 대하여 자세하게 알아보았습니다. 블로그나 읽는 콘텐츠 제공 사이트... 주로 매체의 경우에는 이런 버튼이 있는 경우 사용자에게 매우 친숙한 인터페이스를 제공할 수 있습니다. 어렵지 않은 간단한 코드이지만 출력 기능을 제공하는 사이트와 아닌 사이트를 비교한다면 그 효과는 매우 크다 할 수 있겠죠.
! 프린트 버튼이 왜 필요할까...
프린트 버튼은 보통 많은 글을 보여주는 콘텐츠 제공 웹사이트에서 주로 제공됩니다. 콘텐츠를 공유하는 기능 버튼과 함께 출력할 수 있는 버튼을 제공하죠. 이렇게 하면 방문자가 콘텐츠를 더 편하게 읽고 관리할 수 있도록 도움을 주며 모니터를 이용해 읽을 수도 필요해의해 출력해서 읽도록 도와줍니다.Webisfree.com 역시 프린트 버튼이 존재합니다. 동작하는 기능은 간단합니다. 버튼을 누르면 방문자가 출력할 수 있도록 기능을 제공합니다. 하지만!! 프린트 버튼을 위해서는 몇 가지 필요한 필수 작업들이 있습니다. 기능만으로는 제대로된 출력 기능을 제공할 수 없죠.
쉽게 출력할 수 있는 기능의 프린트 버튼# 프린트 버튼을 만들자
앞에서 언급한 것처럼 프린트 버튼을 만들때 생각할 부분은 무엇일까요? 일단 기능적인 부분에서 스크립트를 사용하여 출력하도록 해야합니다. 이때는 간단하게 아래 코드 한줄이면 가능합니다.window.print();
코드를 실행하면 Ctrl + P 버튼을 누른 것처럼 출력창이 나타나게됩니다. 하지만 문제가 있는데 프린트에 출력될 모습이 실제 모니터에 나타나는 부분과 많이 다릅니다.
그 이유는 출력물에 적용되는 CSS와 디스플레이 모니터에 적용되는 CSS가 다른 부분도 있을 수 있으며 기본적으로 웹사이트가 출력될때는 시스템에 따라 적용되는 부분들이 존재하기 때문입니다. 즉 이런 부분들을 수정해야만 이상적인 출력버튼을 구현할 수 있습니다. 이를 위해서 아래의 두 가지 방법을 알아야합니다.
- 미디어 쿼리 print CSS
- Link 영역 등의 레이아웃 겹치는 부분 해결
CSS 미디어 쿼리를 사용하면 출력에 필요한 부분만 CSS style 적용하는 것이 가능합니다. 이를 사용하여 콘텐츠 영역을 수정할 필요가 있습니다. 주로 아래의 과정들이 필요합니다.
- 불필요한 콘텐츠 및 광고 제거
- 인쇄 목적에 맞는 콘텐츠 크기 조절(텍스트 및 이미지 크기 조절)
- 기타 출력물에 어울리지 않는 부분 스타일 조정
그럼 CSS의 @media 쿼리에서 print, 출력시 어떻게 적용해야하는지 알아봅니다.
# CSS media 쿼리로 print에 대하여 설정하기
아래 코드는 실제 webisfree.com에 적용된 css입니다. 출력을 위해서 불필요한 광고와 aside 영역등을 안보이도록 변경하는 코드가 추가되어 있습니다.@media only print {
/* Code는 여기에... */
};
/* Code는 여기에... */
};
미디어 쿼리는 위와 같이 only print나 print의 값을 사용하여 인쇄시에만 적용되는 스타일을 설정합니다. 이 부분이 매우 중요하며 특히 광고 영역이나 주요 콘텐츠가 아닌 부분 등은 과감히 숨기도록 합니다. display: none;을 사용하면 좋겠죠?
! 인쇄시 링크 주소 제거하기
반드시 필요한 작업 중 하나가 바로 인쇄시 나타나는 링크주소입니다. 이는 시스템에 기본으로 적용되므로 media 쿼리 안에 사용하는 것이 좋습니다. 아래와 같이 a 태그에 적용될 수 있도록 추가합니다.@media only print {
a[href]::after {
content: none !important;
}
}
a[href]::after {
content: none !important;
}
}
# 마치면서
여기까지 웹사이트에 필요한 출력, 인쇄 버튼을 만드는 방법에 대하여 자세하게 알아보았습니다. 블로그나 읽는 콘텐츠 제공 사이트... 주로 매체의 경우에는 이런 버튼이 있는 경우 사용자에게 매우 친숙한 인터페이스를 제공할 수 있습니다. 어렵지 않은 간단한 코드이지만 출력 기능을 제공하는 사이트와 아닌 사이트를 비교한다면 그 효과는 매우 크다 할 수 있겠죠.아래의 글도 찾고 계시지 않나요?
